<html>
<head>
    <title>用户信息更新</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/stylesheets/upload.css">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
</head>
<body>
<div class="main" style="width: 90%;margin: 15px auto">
    <form class="layui-form">
        <input type="hidden" name="id" value="<%= userinfo.id %>">
        <div class="layui-form-item">
            <label class="layui-form-label" for="username">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" name="username" lay-verify="required" value="<%= userinfo.username %>"
                       class="layui-input" placeholder="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="nickname">昵称</label>
            <div class="layui-input-block">
                <input type="text" id="nickname" value="<%= userinfo.nickname %>" name="nickname" lay-verify="required"
                       class="layui-input" placeholder="请输入昵称">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="powerId">权限</label>
            <div class="layui-input-block">
                <select name="powerId" id="powerId">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="status">状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="avatar">头像</label>
            <input type="hidden" name="avatar" id="avatar">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" id="uploadBtn" class="layui-btn">上传头像</button>
                    </div>
                    <div class="upload-image" id="uploadAvatar">
                        <div class="image-list">
                            <div class="image-item">
                                <div class="image-group">
                                    <img src="" alt="">
                                </div>
                                <div class="image-opt">
                                    <div class="image-icon"><i class="search layui-icon layui-icon-search"
                                                               title="查看原图"></i></div>
                                    <div class="image-icon">
                                        <i id="deleteAratar" class="layui-icon layui-icon-delete" title="删除图片"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" for="image">证书</label>
            <input type="hidden" name="image" id="image">
            <div class="layui-input-block">
                <div class="upload-group">
                    <div class="upload-btn">
                        <button type="button" id="imageUpload" class="layui-btn">上传证书</button>
                    </div>
                    <div class="upload-image" id="uploadImage">
                        <div class="image-list" id="imageList">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="submit" lay-submit>提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    let imageList = [];//证书图片列表

    function setEvent() {
        /*给图片绑定鼠标悬浮事件*/
        $(".image-item").mouseover(function () {
            $(this).find(".image-opt").css("display", "flex");
        }).mouseout(function () {
            $(this).find(".image-opt").css("display", "none");
        })

        $(".search").click(function () {
            const image = $(this).parents(".image-item").find("img");
            const src = image.prop("src");
            layer.photos({
                photos: {
                    data: [{
                        src
                    }]
                }
            });
        });

        $(".delete").click(function () {
            layer.confirm('确定删除该图片吗?', {icon: 3}, index => {
                /*获取点击的删除按钮所在的图片下标*/
                const imageItem = $(this).parents(".image-item");
                const imageIndex = imageItem.index();
                /*从数组中删除对应的图片*/
                imageList.splice(imageIndex, 1);
                /*重新渲染图片列表*/
                setImageList();
                layer.close(index);
            })
        });
    }

    /*绑定事件(头像)*/
    setEvent();
    /*头像删除按钮*/
    $("#deleteAratar").click(function () {
        layer.confirm('确定删除该图片吗?', {icon: 3}, function (index) {
            $("#avatar").val("");
            $(this).parents(".image-item").find("img").prop("src", "");
            $("#uploadAvatar").hide();
            layer.close(index);
        })
    });

    /*渲染图片列表*/
    function setImageList() {
        $("#image").val(imageList?.toString());
        let $html = '';
        /*遍历数组拼接图片*/
        for (const image of imageList) {
            $html += '<div class="image-item"><div class="image-group"><img src="/upload/' + image + '" alt=""></div><div class="image-opt"><div class="image-icon"><i class="search layui-icon layui-icon-search" title="查看原图"></i></div><div class="image-icon"><i class="delete layui-icon layui-icon-delete" title="删除图片"></i></div></div></div>';
        }
        $("#imageList").empty().append($html);
        setEvent();
    }

    let status = "<%= userinfo.status %>";
    let powerId = "<%= userinfo.powerId %>";
    let avatar = "<%= userinfo.avatar %>";
    let id = "<%= userinfo.id %>";

    if (status) {//修改
        $("#username").prop("readonly", true);
        $("#status").val(status);
        $(".upload-image").show();
        $(".upload-image img").prop("src", "/upload/" + avatar)
        $("#avatar").val(avatar);

        /*获取关联的证书图片列表*/
        $.ajax({
            url: "/image/list",
            data: {userId: id},
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    imageList = res.data.map(item => item.imageSrc)
                    setImageList();
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }
        });


    }
    layui.use(['form', 'upload'], function () {
        const form = layui.form;
        const upload = layui.upload;

        /*绑定头像上传*/
        upload.render({
            elem: "#uploadBtn",
            url: "/upload",
            done(res) {
                if (res.code === 200) {
                    $("#uploadAvatar").show();
                    $("#uploadAvatar img").prop("src", "/upload/" + res.data)
                    $("#avatar").val(res.data);
                }
            }
        })

        upload.render({
            elem: "#imageUpload",
            url: "/upload",
            done(res) {
                $("#uploadImage").show();
                /*上传成功的图片存入数组*/
                imageList.push(res.data);
                setImageList();
            }
        });


        /*发送ajax请求获取权限列表*/
        $.ajax({
            url: "/power/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    let $html = "";
                    const powerList = res.data;
                    for (let power of powerList) {
                        $html += '<option value="' + power.id + '">' + power.powerName + '</option>';
                    }
                    $("#powerId").empty().append($html);
                    if (powerId) {
                        $("#powerId").val(powerId)
                    }
                    form.render();
                }
            }
        });

        form.on("submit(submit)", function (data) {
            $.ajax({
                url: "/userinfo/update",
                method: "post",
                data: data.field,
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('操作成功！', {icon: 6}, function () {
                            //先得到当前iframe层的索引
                            const index = parent.layer.getFrameIndex(window.name);
                            /*关闭当前弹窗*/
                            parent.layer.close(index);
                            /*刷新list页面的表格*/
                            parent.table.reload('dataTable')
                        })
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }
            });
            return false;
        })
    })
</script>
</html>
